<script setup lang="ts">
const props = defineProps({
  percentage: {
    type: Number,
    default: 8090,
  },
});
const state = reactive({
  cx: 100, // 圆心 x
  cy: 100, // 圆心 y
  r: 90, // 半径
  startAngle: -90, // 起始角度
});
const calculatePoint = (angle) => {
  // 将角度转换为弧度
  const rad = (angle * Math.PI) / 180;
  // 计算坐标
  return {
    x: state.cx + state.r * Math.cos(rad),
    y: state.cy + state.r * Math.sin(rad),
  };
};
const endAngle = computed(() => {
  // 计算结束角度
  return state.startAngle + (props.percentage * 360) / 100;
});
const arcPath = computed(() => {
  // 计算起点和终点坐标
  const start = calculatePoint(state.startAngle);
  const end = calculatePoint(endAngle.value);

  // 判断是否为大弧
  const largeArcFlag = endAngle.value - state.startAngle <= 180 ? 0 : 1;

  // 生成路径命令
  return `
        M ${start.x} ${start.y}
        A ${state.r} ${state.r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}
      `;
});
</script>

<template>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <!-- 背景圆 -->
    <circle cx="100" cy="100" r="90" fill="none" stroke="#eee" stroke-width="10" />
    <!-- 动态弧形 -->
    <path
        :d="arcPath"
        fill="none"
        stroke="#007bff"
        stroke-width="10"
        stroke-linecap="round"
    />
  </svg>
</template>

<style scoped>

</style>